{extend name="public:layout" /}

{block name="title"}
    <title>{:site('siteName')}-设置支付密码</title>
{/block}

{block name="css"}
    <style>
        .layui-form-label{width:70px;    padding: 9px 6px;}
        .layui-input-block{margin-left:90px;margin-right:10px;}
        .layui-form-item { margin-bottom: 9px;}
        .layui-input::-webkit-input-placeholder{ color: #999;font-size:12px;}
        .layui-input::-moz-placeholder{  color: #999;font-size:12px; }
        .layui-input:-ms-input-placeholder{color: #999;font-size:12px;}
    </style>
{/block}

{block name="content"}
    <div class="head">设置支付密码</div>
    <form class="layui-form user-data" action="">

        <div class="layui-form-item" style="margin-top: 15px;">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" value="" placeholder="验证登录密码" lay-verify="required|password" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">原支付密码</label>
            <div class="layui-input-block">
                <input type="password" name="password1" placeholder="首次设置支付密码无需填写" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">支付密码</label>
            <div class="layui-input-block">
                <input type="password" name="password2" value="" placeholder="设置支付密码" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password3" value="" placeholder="确认支付密码" lay-verify="required|password3" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="hidden" name="user_id" value="{$user_id}" />
                <input type="hidden" name="__token__" value="{$Request.token}" />
                <button class="layui-btn layui-btn-main" lay-submit>确定</button>
            </div>
        </div>
    </form>
{/block}

{block name="script"}
    <script type="text/javascript">
        layui.use(['jquery','form','layer'], function(){
            
            var $ = layui.jquery;
            var form = layui.form();
            var layer = layui.layer;

            //表单验证
            form.verify({
                password: function(password){
                    var password2 = $("input[name='password2']").val();
                    if(password == password2){
                        return '登录密码不能和支付密码一样';
                    }
                },
                password3: function(password3){
                    var password2 = $("input[name='password2']").val();
                    if(password2 != password3){
                        return '确认支付密码和支付密码不一致';
                    }
                }
            }); 


        });
    </script>
{/block}